<h3>{{ heading_title }}</h3>
<div class="row">
  {% for product in products %}
    <div class="product-layout col-lg-3 col-md-3 col-sm-6 col-12">
      <div class="product-thumb transition">
        <div class="image"><a href="{{ product.href }}"><img src="{{ product.thumb }}" alt="{{ product.name }}" title="{{ product.name }}" class="img-fluid"/></a></div>
        <div class="caption">
          <h4><a href="{{ product.href }}">{{ product.name }}</a></h4>
          <p>{{ product.description }}</p>
          {% if product.rating %}
            <div class="rating">
              {% for i in 1..5 %}
                {% if product.rating < i %}
                  <span class="fas fa-stack"><i class="fas fa-star-o fa-stack-2x"></i></span>
                {% else %}
                  <span class="fas fa-stack"><i class="fas fa-star fa-stack-2x"></i><i class="fas fa-star-o fa-stack-2x"></i></span>
                {% endif %}
              {% endfor %}
            </div>
          {% endif %}
          {% if product.price %}
            <p class="price">
              {% if not product.special %}
                {{ product.price }}
              {% else %}
                <span class="price-new">{{ product.special }}</span> <span class="price-old">{{ product.price }}</span>
              {% endif %}
              {% if product.tax %}
                <span class="price-tax">{{ text_tax }} {{ product.tax }}</span>
              {% endif %}
            </p>
          {% endif %}
        </div>
        <div class="button-group">
          <button type="button" onclick="cart.add('{{ product.product_id }}');"><i class="fas fa-shopping-cart"></i> <span class="d-none d-lg-inline">{{ button_cart }}</span></button>
          <button type="button" data-toggle="tooltip" title="{{ button_wishlist }}" onclick="wishlist.add('{{ product.product_id }}');"><i class="fas fa-heart"></i></button>
          <button type="button" data-toggle="tooltip" title="{{ button_compare }}" onclick="compare.add('{{ product.product_id }}');"><i class="fas fa-exchange-alt"></i></button>
        </div>
      </div>
    </div>
  {% endfor %}
</div>